<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="css/index.css">
	<script src="js/vue.min.js"></script>
	<script src="js/elementui.js"></script>
	<script src="js/axios.min.js"></script>
	<script src="js/common.js"></script>
	<title>Document</title>
</head>

<body>
	<div id="app">

		<el-table :data="tableData" border style="width: 100%">
			<el-table-column prop="rolename" label="角色名称" width="180">
			</el-table-column>
			<el-table-column prop="description" label="角色部门" width="180">
			</el-table-column>
			<el-table-column label="操作">
				<template slot="header" slot-scope="scope">
					<el-button size="mini" type="primary" @click="add">增加</el-button>
				</template>
				<template slot-scope="scope">
					<el-button size="mini" @click="uprole(scope.$index, scope.row)">编辑</el-button>
					<el-button type="warning" size="mini" @click="uprolemenu(scope.$index, scope.row)">角色菜单</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-drawer title="角色菜单维护" :visible.sync="drawer">
			&nbsp;&nbsp;&nbsp;
			<el-button type="primary" size="mini" @click="uprolemenusubimt">确定修改角色菜单</el-button>
			<el-tree @check="trchange" ref="tree" :data="treedata" :check-strictly="true" show-checkbox
				default-expand-all node-key="id" highlight-current>
			</el-tree>
			<!-- {{treedata}} -->
		</el-drawer>
	</div>
</body>
<script>
	new Vue({
		el: "#app",
		data: {
			tableData: [],
			drawer: false, //控制角色菜单维护的抽屉
			treedata: [],
			nowroleid: 0, //当前要修改的角色id
		},
		methods: {
			initTableData() {
				let that = this
				axios.get(API + "selectRole").then(function (res) {
					that.tableData = res.data.data.roleList
				}).catch(err => {
					console.log(err)
				});
			},
			add() {

			},
			uprole() {

			},
			uprolemenusubimt() {
				let treeNowArr = this.$refs.tree.getCheckedKeys() //获取树当前选中的节点
				let that = this
				axios.post(API + "selectRoleMenuById", {
					roleid: this.nowroleid,
					listMenu: treeNowArr
				}).then(function (res) {
					if (res.data.success) { // 假设服务器端返回的数据结构中有success字段
						that.$message({
							message: '修改成功',
							type: 'success'
						});
						that.drawer = false; // 关闭抽屉

						// 可选：刷新表格数据或进行其他操作
						that.initTableData();
					} else {
						that.$message.error('修改失败，请稍后再试');
					}
				}).catch(err => {
					console.log(err)
				});
			},
			trchange(a, b) {
				console.log(a.children)
				let treeNowArr = this.$refs.tree.getCheckedKeys() //获取树当前选中的节点
				treeNowArr.push(a.parentid)
				console.log(treeNowArr)
				if (a.children != null) {
					const childrenArr = a.children.map((obj) => obj.id)
					console.log(childrenArr)
					treeNowArr = treeNowArr.filter(item => !childrenArr.includes(item));
				}
				this.$refs.tree.setCheckedKeys(treeNowArr);
			},
			uprolemenu(i, row) {
				this.initTableData() //初始化菜单
				// alert(row.id)
				let that = this
				axios.get(API + "selectRoleMenuById/" + row.id).then(function (res) {
					let slist = res.data.data.rolemenuList
					const arr = slist.map((obj) => obj.menuid);//取数组里面对象的数学

					that.$refs.tree.setCheckedKeys(arr);
					console.log(res.data.data.rolemenuList)
				}).catch(err => {
					console.log(err)
				});
				this.drawer = true
			},
			initTreeData() {
				let that = this
				axios.get(API + "selectmenu").then(function (res) {
					console.log(res.data.data.menuList)
					let s = arrayToTree(res.data.data.menuList)
					that.treedata = s


				}).catch(err => {
					console.log(err)
				});
			}
		},
		mounted() {
			this.initTableData();
		}
	})
</script>

</html>